<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>冒险起源</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
<script src="js/iscroll.js"></script>
<script src="js/pullToRefresh.js"></script>
</head>
<body>
<!--header-->
<div class="header" style="background: url(images/in_header_bg.png) center; background-size:100%;">
	<div class="header_bar"></div>
    <div class="index_top">
        <div class="fenqu y_center">
            <div class="li_box y_center on">
                <span class="pic"><img src="images/weixin.png" /></span><span>微信区</span>
            </div>
            <div class="li_box y_center">
                <span class="pic"><img src="images/qq.png" /></span><span>QQ区</span>
            </div>
        </div>
        <div class="clear_h10"></div>
        <div class="x_start_end">
            <div class="info_box x_start y_center">
                <div class="info_pic mr10"><img src="images/role_face/role_face_guijian_04.png" /></div>
                <div class="info_con show_pop_juese">
                    <h3 class=" y_center"><span class="t_ellipsis_1">9.9瞎子</span><i class="m_icon qiehuan ml5"></i></h3>
                    <p class="t_ellipsis_1">角色名称</p>
                </div>
            </div>
            <a href="javascript:;" class="in_kefu x_start y_center">
                <div class="pic"><img src="images/kefu.png" /></div>
                <span>客服</span>
            </a>
            
        </div>
        <div class="clear_h50"></div>
    </div>
</div>
<!--nav-->
<div class="index_nav x_start_end">
	<div class="x_start">
        <div class="li_box nav_btn x_center y_center">
            <a href="javascript:;" class="show_pop_tuan">
            <img src="images/in_nav_tuan.png" />
            <p>组队打团</p>
            </a>
        </div>
        <div class="li_box filter_li x_center y_center on">
            <a href="javascript:;">
            <img src="images/in_nav_taila.png" />
            <p>泰拉车</p>
            <i class="m_icon dui"></i>
            </a>
        </div>
        <div class="li_box filter_li x_center y_center">
            <a href="javascript:;">
            <img src="images/in_nav_shuatu.png" />
            <p>刷图</p>
            <i class="m_icon dui"></i>
            </a>
        </div>
    </div>
	<div class="x_start">
        <div class="li_box x_center y_center show_pop_pingtaiguize">
            <a href="javascript:;">
            <p>平台</p>
            <p>规则</p>
            </a>
        </div>
    </div>
</div>
<div class="clear_h10"></div>
<!--图导航-->
<div class="in_tu_nav">
	<div class="ul_box x_start">
        <div class="li_box on">
            <img src="images/in_tu_01.png" />
            <p class="t_ellipsis_1">攻坚·奥兹玛</p>
        </div>
        <div class="li_box">
            <img src="images/in_tu_01.png" />
            <p class="t_ellipsis_1">攻坚·奥兹玛</p>
        </div>
        <div class="li_box">
            <img src="images/in_tu_01.png" />
            <p class="t_ellipsis_1">攻坚·奥兹玛</p>
        </div>
        <div class="li_box">
            <img src="images/in_tu_01.png" />
            <p class="t_ellipsis_1">攻坚·奥兹玛</p>
        </div>
        <div class="li_box">
            <img src="images/in_tu_01.png" />
            <p class="t_ellipsis_1">攻坚·奥兹玛</p>
        </div>
    </div>

</div>
<div class="clear_h10"></div>
<!--列表-->
<div id="wrapper" class="index_list">
  <div>
    <div class="scroll_list">
    	<!--第1个li_box为泰拉车的列表（泰拉交易）-->
        <a href="task_show.html" class="li_box">
        	<div class="state st_a">等候中</div><!--st_a等候中，st_b进行中-->
            <div class="x_start_end y_center info">
                <div>
                    <div class="tit x_start y_center">
                        <div class="user_face"><img src="images/role_face/role_face_guijian_01.png" /></div>
                        <div class="ml10">
                            <div class="name">4.3 武神</div>
                            <div class="time color_999 t_ellipsis_1">1分钟前</div>
                        </div>
                    </div>
                    <div class="label x_start">
                        <em class="bgc_36f mr5">>200万泰拉</em>
                        <em class="bgc_e00">比例5000</em>
                    </div>
                </div>
                <div class="per x_end">
                    <i class="m_icon car on"></i>
                    <i class="m_icon knife on"></i>
                    <i class="m_icon shop"></i>
                    <i class="m_icon people"></i>
                    <i class="m_icon people"></i>
                    <i class="m_icon people"></i>
                </div>
            </div>
        </a>
        <!--第2个li_box为刷图的列表-->
        <a href="task_show.html" class="li_box">
        	<div class="state st_b">进行中</div>
            <div class="x_start_end y_center info">
                <div>
                    <div class="tit x_start y_center">
                        <div class="user_face"><img src="images/role_face/role_face_guijian_02.png" /></div>
                        <div class="ml10">
                            <div class="name">4.3 武神</div>
                            <div class="time color_999 y_center t_ellipsis_1"><em class="price">¥50</em>59分钟前</div>
                        </div>
                    </div>
                </div>
                <div class="per x_end">
                    <i class="m_icon car on"></i>
                    <i class="m_icon knife on"></i>
                    <i class="m_icon shop"></i>
                    <i class="m_icon people"></i>
                    <i class="m_icon people"></i>
                    <i class="m_icon people"></i>
                </div>
            </div>
            
            <!--优势备注，不填直接隐藏掉标签-->
            <div class="remark t_ellipsis_1">
                <p>30秒真男人，极速刷图</p>
            </div>
        </a>
        <a href="task_show.html" class="li_box">
        	<div class="state st_b">进行中</div>
            <div class="x_start_end y_center info">
                <div>
                    <div class="tit x_start y_center">
                        <div class="user_face"><img src="images/role_face/role_face_guijian_03.png" /></div>
                        <div class="ml10">
                            <div class="name">4.3 武神</div>
                            <div class="time color_999 y_center t_ellipsis_1"><em class="price">¥5</em>1分钟前</div>
                        </div>
                    </div>
                </div>
                <div class="per x_end">
                    <i class="m_icon car on"></i>
                    <i class="m_icon knife on"></i>
                    <i class="m_icon shop"></i>
                    <i class="m_icon people"></i>
                    <i class="m_icon people"></i>
                    <i class="m_icon people"></i>
                </div>
            </div>
        </a>
        <a href="task_show.html" class="li_box">
        	<div class="state st_c"><img src="images/state_c.png" /></div><!--已完成为图片-->
            <div class="x_start_end y_center info">
                <div>
                    <div class="tit x_start y_center">
                        <div class="user_face"><img src="images/role_face/role_face_guijian_04.png" /></div>
                        <div class="ml10">
                            <div class="name">4.3 武神</div>
                            <div class="time color_999 y_center t_ellipsis_1"><em class="price">¥5</em>1分钟前</div>
                        </div>
                    </div>
                </div>
                <div class="per x_end">
                    <i class="m_icon car on"></i>
                    <i class="m_icon knife on"></i>
                    <i class="m_icon shop"></i>
                    <i class="m_icon people"></i>
                    <i class="m_icon people"></i>
                    <i class="m_icon people"></i>
                </div>
            </div>
        </a>
        
    </div>
    
  </div>
</div>
<!--footer-->
<div class="footer">
    <div class="foot_tabbar_empty"></div>
    <div class="foot_tabbar border_t x_pad_start_end">
        <a href="task_index.html" class="li_box home on">
            <i class="icon"></i>
            <p>组队大厅</p>
        </a>
        <a href="mem_team.html" class="li_box team">
            <i class="icon"></i>
            <p>组队记录</p>
        </a>
        <a href="mem_share.html" class="li_box activity">
            <i class="icon"></i>
            <p>福利活动</p>
        </a>
        <a href="mem_index.html" class="li_box member">
            <i class="icon"></i>
            <p>个人中心</p>
        </a>
    </div>
</div>

<!--悬浮按钮-->
<div class="susp_box">
    <div class="btn x_center y_center btn_36f">
    	<div>
        	<i class="m_icon shuaxin"></i>
        	<p>刷新</p>
        </div>
    </div>
</div>

<!--弹窗，角色-->
<div class="js_dialog js_dialog_juese">
	<div class="pop_box pop_juese_box pop_down_box">
        <div class="pop_tit y_center border_b">
        	<h3>选择角色职业</h3>
            <i class="m_icon pop_close pop_juese_close"></i>
        </div>
        <div class="con_box">
            <div class="x_start_end flex_wrap">
                <a href="javascript:;" class="li_box x_start y_center pop_juese_close on">
                    <div class="user_face"><img src="images/role_face/role_face_guijian_01.png" /></div>
                    <div class="ml10">
                        <div class="name">4.3 武神</div>
                        <div class="color_999 t_ellipsis_1">自定义游戏名</div>
                    </div>
                </a>
                <a href="javascript:;" class="li_box x_start y_center pop_juese_close">
                    <div class="user_face"><img src="images/role_face/role_face_guijian_01.png" /></div>
                    <div class="ml10">
                        <div class="name">4.3 武神</div>
                        <div class="color_999 t_ellipsis_1">自定义游戏名自定义游戏名</div>
                    </div>
                </a>
                
            </div>
        </div>
        <div class="btn_sub y_center">
            <div class="x_start_end w_percent_100">
                <a href="javascript:;" class="btn btn_oline btnc_36f pop_juese_close">管理角色</a>
                <a href="javascript:;" class="btn btn_bg btnc_36f pop_juese_close">新建角色</a>
            </div>
        </div>
    </div>
</div>

<!--弹窗，平台规则-->
<div class="js_dialog js_dialog_pingtaiguize">
	<div class="pop_box pop_down_box pop_iframe_box pop_pingtaiguize_box">
        <div class="pop_tit y_center border_b">
        	<h3>平台规则</h3>
            <i class="m_icon pop_close pop_pingtaiguize_close"></i>
        </div>
        <div class="con_box">
            <iframe src="page_news_guize.html" class="page_iframe"></iframe>
        </div>
        <div class="clear_h10"></div>
        
    </div>
</div>

<!--弹窗，组团-->
<div class="js_dialog js_dialog_tuan">
	<div class="pop_box pop_tuan_box">
        <div class="pop_tit y_center x_center">
        	<div class="pop_filter_li y_center">
                <div class="li_box y_center">
                    <i class="m_icon taila"></i><span>泰拉车</span>
                </div>
                <div class="li_box y_center">
                    <i class="m_icon shuatu"></i><span>刷图</span>
                </div>
            </div>
            <i class="m_icon pop_close pop_tuan_close"></i>
        </div>
        <div class="con_box">
            <div class="pop_tu_nav">
                <div class="ul_box x_start">
                    <div class="li_box on">
                        <img src="images/in_tu_01.png" />
                        <p class="t_ellipsis_1">攻坚·奥兹玛</p>
                    </div>
                    <div class="li_box">
                        <img src="images/in_tu_01.png" />
                        <p class="t_ellipsis_1">攻坚·奥兹玛</p>
                    </div>
                    <div class="li_box">
                        <img src="images/in_tu_01.png" />
                        <p class="t_ellipsis_1">攻坚·奥兹玛</p>
                    </div>
                    <div class="li_box">
                        <img src="images/in_tu_01.png" />
                        <p class="t_ellipsis_1">攻坚·奥兹玛</p>
                    </div>
                    <div class="li_box">
                        <img src="images/in_tu_01.png" />
                        <p class="t_ellipsis_1">攻坚·奥兹玛</p>
                    </div>
                </div>
            </div>
            <div class="clear_h10"></div>
            <div class="pop_tab_li y_center">
                <div class="li_box y_center x_center on">
                    <i class="m_icon taila"></i><span>泰拉车</span>
                </div>
                <div class="li_box y_center x_center">
                    <i class="m_icon shuatu"></i><span>刷图</span>
                </div>
            </div>
            <div class="clear_h10"></div>
            <div class="pop_inp_list">
                <div class="inp_li x_start_end y_center">
                    <span class="name y_center">当前角色<i class="m_icon tips"></i></span>
                    <div class="con x_end y_center">
                        <div class="user_face"><img src="images/role_face/role_face_guijian_01.png" /></div>
                        <div class="ml5">4.3 武神</div>
                        <i class="m_icon qiehuan ml5 show_pop_juese"></i>
                    </div>
                </div>
                <div class="inp_li x_start_end y_center">
                    <span class="name y_center">选择位置</span>
                    <div class="con x_end y_center">
                        <div class="loca">
                        	<span class="on">老板</span><span>打手</span><span>混子</span>
                        </div>
                    </div>
                </div>
                <div class="inp_li x_start_end y_center">
                    <span class="name y_center">拥有泰拉</span>
                    <div class="con x_end y_center">
                        <div class="inp_radio y_center on"><input type="radio" name="tl"><i class="m_icon"></i><span>50万</span></div>
                        <div class="inp_radio y_center"><input type="radio" name="tl"><i class="m_icon"></i><span>100万</span></div>
                        <div class="inp_radio y_center"><input type="radio" name="tl"><i class="m_icon"></i><span>200万</span></div>
                        	
                    </div>
                </div>
                <div class="inp_li x_start_end y_center">
                    <span class="name y_center">泰拉数量</span>
                    <div class="con x_end y_center">
                        <div class="inp_checkbox y_center on"><input type="checkbox"><i class="m_icon"></i><span>50万</span></div>
                        <div class="inp_checkbox y_center on"><input type="checkbox"><i class="m_icon"></i><span>100万</span></div>
                        <div class="inp_checkbox y_center on"><input type="checkbox"><i class="m_icon"></i><span>200万</span></div>
                    </div>
                </div>
                <div class="inp_li x_start_end y_center">
                    <span class="name y_center">买家押金<i class="m_icon tips"></i></span>
                    <div class="con x_end y_center">
                        <span>¥50~¥100</span>
                    </div>
                </div>
                <div class="inp_li x_start_end y_center">
                    <span class="name y_center">设置金额</span>
                    <div class="con x_end y_center">
                        <input type="text" placeholder="默认¥3，¥1~50可编辑"><!--不填写就是默认值-->
                    </div>
                </div>
                <div class="inp_li x_start_end y_center">
                    <span class="name y_center">打手优势</span>
                    <div class="con x_end y_center">
                        <input type="text" placeholder="选填，如30秒极速刷图">
                    </div>
                </div>
                <div class="inp_li x_start_end y_center">
                    <span class="name y_center">上传图片</span>
                    <div class="con x_end y_center">
                        <div class="file_pic_list x_end y_center">
                        	<div class="pic_li">
                                <div class="pic x_center y_center">
                                	<img src="images/in_tu_01.png" />
                                	<i class="m_icon remove"></i>
                                </div>
                            </div>
                            <div class="pic_li">
                                <div class="pic x_center y_center">
                                	<img src="images/in_tu_01.png" />
                                	<i class="m_icon remove"></i>
                                </div>
                            </div>
                            <div class="pic_li">
                            	<div class="pic x_center y_center">
                                	<a href="javascript:;" class="add x_center y_center"><i class="m_icon"></i><input type="file" value="" /></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="btn_sub y_center">
            <div class="w_percent_100">
            	<div class="x_center tips">泰拉物品拉满（否则将扣除押金赔付买家）</div>
                <div class="x_start_end">
                    <a href="javascript:;" class="btn btn_oline btnc_36f pop_tuan_close">创建房间</a>
                    <a href="javascript:;" class="btn btn_bg btnc_36f pop_tuan_close">快速加入</a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$().ready(function(){
	
	//弹窗，角色
	pop_box_c({
		show_btn:".show_pop_juese",
		zz:".js_dialog_juese",
		box:".pop_juese_box",
		close:".pop_juese_close",
		body_close:true
	});
	
	//弹窗，平台规则
	pop_box_c({
		show_btn:".show_pop_pingtaiguize",
		zz:".js_dialog_pingtaiguize",
		box:".pop_pingtaiguize_box",
		close:".pop_pingtaiguize_close",
		body_close:true
	});
	
	//弹窗，组团
	pop_box_c({
		show_btn:".show_pop_tuan",
		zz:".js_dialog_tuan",
		box:".pop_tuan_box",
		close:".pop_tuan_close",
		body_close:true
	});
	
	$(".pop_tuan_box .pop_filter_li .li_box").click(function(){
		if($(this).is(".on")){
			$(this).removeClass("on");
		} else{
			$(this).addClass("on").siblings(".li_box").removeClass("on");
		}
	});
	
	$(".pop_tuan_box .pop_tab_li .li_box").click(function(){
		if(!$(this).is(".on")){
			$(this).addClass("on").siblings(".li_box").removeClass("on");
		}
	});
	
	$(".show_pop_tuan").click(function(){
		var pop_tu_nav_li_ml=5;
		var pop_tu_nav_li_num=$(".pop_tu_nav").find(".li_box").length;
		var pop_tu_nav_li_w=parseInt(($(".pop_tu_nav").width()/3-pop_tu_nav_li_ml/3*2)*10)/10; 
		
		$(".pop_tu_nav .li_box").css({"width":pop_tu_nav_li_w,"height":pop_tu_nav_li_w/2,"margin-left":pop_tu_nav_li_ml});
		$(".pop_tu_nav .ul_box").width(pop_tu_nav_li_w*pop_tu_nav_li_num+pop_tu_nav_li_ml*(pop_tu_nav_li_num-1));
	});
	
	//分区
	$(".fenqu .li_box").click(function(){
		if(!$(this).is(".on")){
			$(this).addClass("on").siblings(".li_box").removeClass("on");
		}
	});
	
	//图筛选
	$(".index_nav .filter_li").click(function(){
		if($(this).is(".on")){
			$(this).removeClass("on");
		} else{
			$(this).addClass("on").siblings(".filter_li").removeClass("on");
		}
	});
	
	//图列表
	var in_tu_nav_li_ml=10;
	var in_tu_nav_li_num=$(".in_tu_nav").find(".li_box").length;
	var in_tu_nav_li_w=parseInt(($(".in_tu_nav").width()/3-in_tu_nav_li_ml/3*2)*10)/10; 
	
	$(".in_tu_nav .li_box").css({"width":in_tu_nav_li_w,"height":in_tu_nav_li_w/2,"margin-left":in_tu_nav_li_ml});
	$(".in_tu_nav .ul_box").width(in_tu_nav_li_w*in_tu_nav_li_num+in_tu_nav_li_ml*(in_tu_nav_li_num-1));
	
	
	//上拉下拉
	$("#wrapper").height($(window).height()-$("#wrapper").position().top-$(".footer").outerHeight(true));
	
	refresher.init({
		id:"wrapper",
		pullDownAction:Refresh,                                                            
		pullUpAction:Load 																			
	});	
	
});
function Refresh() {																
	setTimeout(function () {//模拟网络拥塞，从生产中删除设置超时!
		var innerHTML="";															
		for (i=0; i<=5; i++) {																		 
			innerHTML += '<a href="task_show.html" class="li_box">'+
'        	<div class="state st_b">进行中</div>'+
'            <div class="x_start_end y_center info">'+
'                <div>'+
'                    <div class="tit x_start y_center">'+
'                        <div class="user_face"><img src="images/role_face/role_face_guijian_01.png" /></div>'+
'                        <div class="ml10">'+
'                            <div class="name">4.3 武神</div>'+
'                            <div class="time color_999 y_center t_ellipsis_1"><em class="price">¥5</em>1分钟前</div>'+
'                        </div>'+
'                    </div>'+
'                </div>'+
'                <div class="per x_end">'+
'                    <i class="m_icon car on"></i>'+
'                    <i class="m_icon knife on"></i>'+
'                    <i class="m_icon shop"></i>'+
'                    <i class="m_icon people"></i>'+
'                    <i class="m_icon people"></i>'+
'                    <i class="m_icon people"></i>'+
'                </div>'+
'            </div>'+
'        </a>';																
		}		
		$("#wrapper .scroll_list").html(innerHTML);																					 
		wrapper.refresh();//请记住在操作完成后刷新！ ---yourId.refresh();----
	}, 1000);
}
function Load() {
	setTimeout(function () {//模拟网络拥塞，从生产中删除设置超时!
		var innerHTML="";
		for (i=0; i<=10; i++) {																		 
			innerHTML += '<a href="task_show.html" class="li_box">'+
'        	<div class="state st_b">进行中</div>'+
'            <div class="x_start_end y_center info">'+
'                <div>'+
'                    <div class="tit x_start y_center">'+
'                        <div class="user_face"><img src="images/role_face/role_face_guijian_01.png" /></div>'+
'                        <div class="ml10">'+
'                            <div class="name">4.3 武神</div>'+
'                            <div class="time color_999 y_center t_ellipsis_1"><em class="price">¥5</em>1分钟前</div>'+
'                        </div>'+
'                    </div>'+
'                </div>'+
'                <div class="per x_end">'+
'                    <i class="m_icon car on"></i>'+
'                    <i class="m_icon knife on"></i>'+
'                    <i class="m_icon shop"></i>'+
'                    <i class="m_icon people"></i>'+
'                    <i class="m_icon people"></i>'+
'                    <i class="m_icon people"></i>'+
'                </div>'+
'            </div>'+
'        </a>';														
		}		
		$("#wrapper .scroll_list").append(innerHTML);
		wrapper.refresh();//记住在操作完成后刷新！！！ ---id.refresh();---
	}, 1000);	
}

</script>
</body>
</html>
